<template>
	<view class="picbook fonts">
		<view class="title">
			<i class="dot"></i>
			<view class="color">{{ picbook.name }}</view>
		</view>
		<swiper class="swiper" @change="change" duration="300">
			<swiper-item v-for="(item, index) in picbook.pages" :key="index">
				<view class="swiper-item">
					<view class="picbookContent" :style="{ background: 'url(' + item.backgroundImageUrl + ') 0 0 /100% 100%' }">
						<Imagery :currentImageries="currentImageries(index)" />
						<Role :currentRoles="currentRoles(index)" />
					</view>
				</view>
			</swiper-item>
		</swiper>
		<image class="narratorIcon leftEnter" v-if="!dialogueShow" @tap="playNarrator" src="../../static/dialogue.png"></image>
		<view class="narrator leftEnter" v-if="!dialogueShow">{{ currentNarrator }}</view>
		<view class="dialogue leftEnter" v-if="dialogueShow">
			<image class="head" mode="widthFix" :src="indexDialogue.roleAvatarUrl"></image>
			<view class="content color">{{ indexDialogue.dialogueText }}</view>
		</view>
	</view>
</template>

<script>
import Role from '../../components/role/role.vue'
import Imagery from '../../components/imagery/imagery.vue'
export default {
	data() {
		return {
			current: 0,
			dialogueShow: false,
			picbook: { pages: [] },
			indexDialogue: {}
		}
	},
	components: {
		Role,
		Imagery
	},
	onLoad(option) {
		this.picbook = JSON.parse(decodeURIComponent(option.item))
		console.log(this.picbook );
		this.$post(this.api.trackPicbook, { deviceUuid: this.deviceUuid, picbookId: this.picbook.id })
	},
	mounted() {
		this.playNarrator()
		uni.setNavigationBarTitle({
			title: this.current + 1 + ' / ' + this.picbook.pages.length
		})
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/picbookList/picbookList',
			imageUrl: ''
		}
	},
	computed: {
		//每页角色
		currentRoles(index) {
			return function(index) {
				return this.picbook.roles.filter(item => {
					return item.pageNumber === index + 1
				})
			}
		},
		//每页意象
		currentImageries(index) {
			return function(index) {
				return this.picbook.imageries.filter(item => {
					return item.pageNumber === index + 1
				})
			}
		},
		//当前旁白
		currentNarrator() {
			if (this.current < this.picbook.pages.length) {
				return this.picbook.pages[this.current].asideText
			}
		}
	},
	methods: {
		//监听滑动事件 改变当前页
		change: function(event) {
			this.current = event.detail.current
			uni.setNavigationBarTitle({
				title: this.current + 1 + ' / ' + this.picbook.pages.length
			})
			this.dialogueShow = false
			this.dialogueAudio({ play: false })
			this.narratorAudio({ play: false })
			this.playNarrator()
		},
		//播放当前旁白
		playNarrator: async function() {
			const current = this.current
			const data = await this.parseTextAudio({ text: this.currentNarrator, speaker: this.picbook.detail.speaker })
			if (current !== this.current) return
			this.narratorAudio({
				src: data
			})
		},
		setIndexDialogue: function(option) {
			this.indexDialogue = option
		}
	},
	beforeDestroy() {
		this.narratorAudio({ play: false })
		this.dialogueAudio({ play: false })
	},
	onHide() {
		this.narratorAudio({ play: false })
		this.dialogueAudio({ play: false })
	},
	watch: {
		indexDialogue: function(dialogue) {
			if (dialogue.dialogueAudioUrl) {
				this.dialogueShow = true
				this.narratorAudio({ play: false })
			} else {
				this.dialogueShow = false
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.picbook
	position fixed
	background-color #fefbf3
	top 40rpx
	border-radius 65rpx 65rpx 0 0
	height 100%
	width 100%
	.title
		margin-top 3vh
		margin-left 40rpx
		line-height 40rpx
		font-size 40rpx
		overflow hidden
		.dot
			background-color #FFC268
			width 40rpx
			height 40rpx
			border-radius 50%
			float left
			margin-right 20rpx
	.swiper
		width 100%
		height 500rpx
		margin-top 3vh
		position relative
		.swiper-item
			height 500rpx
			width 720rpx
			margin-left 15rpx
			position fixed
			overflow hidden
			border-radius 70rpx
			border 12rpx solid #FCC77D
			box-sizing border-box
			.picbookContent
				position relative
				height 500rpx
				width 915rpx
				left 50%
				top 50%
				transform translate3d(-50%, -50%, 0)
	.narratorIcon
		width 200rpx
		height 80rpx
		margin 4vh 0 0 30rpx
		filter drop-shadow(3rpx 3rpx 1rpx #FFF4E2)
	.narrator
		font-size 35rpx
		width 80vw
		text-indent 60rpx
		margin-left 60rpx
		margin-top 3vh
		line-height 45rpx
	.dialogue
		.head
			width 150rpx
			height 150rpx
			margin 4vh 0 0 30rpx
		.content
			font-size 38rpx
			width 80vw
			margin-left 60rpx
			margin-top 3vh
			text-indent 60rpx
.leftEnter
	animation left-enter 300ms
@keyframes left-enter
	0%
		transform translateX(-200rpx)
	100%
		transform translateX(0rpx)
</style>
